<template>
  <el-col class="info-wrapper" :span="23">
    <el-tabs class="table-tabs" type="border-card">
      <el-tab-pane>
        <span slot="label">基本信息</span>
        <el-form ref="form" :model="form" label-width="180px">
          <el-col :span="24">
            <el-form-item label="企业名称" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业名称(英文)">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业原名">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="统一社会信用代码" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
              <el-button style="margin-left: 20px;" type="primary">验证</el-button>
              <span style="margin-left: 20px;">（国家组织机构代码中心www.nacao.org.cn）</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法人代表" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="注册资本" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
              <span> 万元</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="国家/地区代码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="行政区划">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="注册地址" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
              <span> 默认</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="注册地址（英文）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮政编码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="办公通讯地址" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
              <span> 同上</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="办公通讯（英文）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮政编码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者（制造商）名称" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者（制造商）地址" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产者（制造商）地址（英文）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮政编码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业名称" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业地址" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产企业地址（英文）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮政编码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业性质" required>
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业电话" required>
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业员工数量">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业专业技术人员数量">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组织邮箱">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="工厂编码">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="规模以上企业">
              <el-radio v-model="radio" label="1">是</el-radio>
              <el-radio v-model="radio" label="2">否</el-radio>            
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据收集时间">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="原酒生产能力">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="成品酒产量">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="销售额">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="窖池数量（条）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="储酒能力（吨）">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="企业作息时间">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="合作单位">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客户级别">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="业务员">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="客服人员">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>            
            </el-form-item>
          </el-col>
        </el-form>
        <el-button type="primary" class="save-btn">保存</el-button>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">附加信息</span>
        <el-form ref="form" :model="form" label-width="180px">
          <el-col :span="12">
            <el-form-item label="最高管理者">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高管理者手机号">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理者代表">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="管理者代表手机号">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一般联系人">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="一般联系人手机号">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="margin-top: 40px;" :span="24">
            <el-form-item label="邮寄企业名称">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮寄地址">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="邮编">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收件人">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系电话">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
              <div>
                <el-link type="primary" :underline="false">一键复制</el-link>
              </div>
            </el-form-item>
          </el-col>
          <el-col style="margin-top: 40px;" :span="24">
            <el-form-item label="企业网站">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经营范围">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注信息">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主要产品">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="主要客户">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="获得奖项">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <el-button type="primary" class="save-btn">保存</el-button>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">资质证书登记</span>
        <el-button type="primary" style="margin-bottom: 10px;">批量打包下载</el-button>
        <el-table style="margin-bottom: 20px;" border :data="tableData">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="date" label="证书号码"> </el-table-column>
          <el-table-column prop="date" label="证书名称"> </el-table-column>
          <el-table-column prop="date" label="证书范围"> </el-table-column>
          <el-table-column prop="date" label="开始时间"> </el-table-column>
          <el-table-column prop="date" label="到期时间"> </el-table-column>
          <el-table-column prop="date" label="上传人"> </el-table-column>
          <el-table-column prop="date" label="备注"> </el-table-column>
          <el-table-column prop="date" label="操作" width="150px">
            <el-link type="primary" :underline="false" style="margin-right: 10px;">下载</el-link>
            <el-link type="primary" :underline="false" style="margin-right: 10px;">修改</el-link>
            <el-link type="primary" :underline="false">删除</el-link>
          </el-table-column>
        </el-table>

        <el-form ref="form" :model="form" label-width="180px">
          <el-col :span="24">
            <el-form-item label="证书名称：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证书号码：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发证日期：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证书范围：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="证书备注：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="资质证书上传：">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg、pdf文件，最大10M</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="add-bar">
          <el-button type="primary" style="margin-right: 20px;">添加</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">企业文档</span>
        <el-button type="primary" style="margin-bottom: 10px;">批量打包下载</el-button>
        <el-table style="margin-bottom: 20px;" border :data="tableData">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号"> </el-table-column>
          <el-table-column prop="date" label="文档名"> </el-table-column>
          <el-table-column prop="date" label="文档类型"> </el-table-column>
          <el-table-column prop="date" label="备注"> </el-table-column>
          <el-table-column prop="date" label="上传时间"> </el-table-column>
          <el-table-column prop="date" label="上传人"> </el-table-column>
          <el-table-column prop="date" label="操作" width="150px">
            <el-link type="primary" :underline="false" style="margin-right: 10px;">下载</el-link>
            <el-link type="primary" :underline="false" style="margin-right: 10px;">预览</el-link>
            <el-link type="primary" :underline="false">删除</el-link>
          </el-table-column>
        </el-table>

        <el-form ref="form" :model="form" label-width="180px">
          <el-col :span="24">
            <el-form-item label="文档类型：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input type="text" v-model="value1" style="width: 300px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传：">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-form>
        <div class="add-bar">
          <el-button type="primary" style="margin-right: 20px;">添加</el-button>
          <el-button type="primary">保存</el-button>
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot="label">单元信息</span>
        <el-col class="info-wrapper" :span="24">
          <el-form
            ref="form"
            :model="searchParams"
            class="search-from main-content"
            label-width="120px"
          >
            <el-col class="search-col">
              <el-form-item label="企业名称" prop="companyName">
                <el-input v-model="searchParams.companyName"></el-input>
              </el-form-item>
              <el-form-item label="组织代码" prop="groupId">
                <el-input v-model="searchParams.groupId"></el-input>
              </el-form-item>
              <el-form-item label="省份" prop="province">
                <el-select
                  v-model="searchParams.province"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in provinceList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="联系人" prop="contacts">
                <el-input v-model="searchParams.contacts"></el-input>
              </el-form-item>
            </el-col>
            <el-col class="search-col operation-area">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button @click="reset">清空</el-button>
            </el-col>
          </el-form>

          <el-table style="margin-top: 20px;" border :data="tableData">
            <el-table-column type="index" label="序号"> </el-table-column>
            <el-table-column prop="date" label="申请企业名称"> </el-table-column>
            <el-table-column prop="date" label="企业注册资本（万元）"> </el-table-column>
            <el-table-column prop="date" label="审核年份"> </el-table-column>
            <el-table-column prop="date" label="数据年份"> </el-table-column>
            <el-table-column prop="date" label="年原酒生产能力（吨）"> </el-table-column>
            <el-table-column prop="date" label="年成品酒产量（吨）"> </el-table-column>
            <el-table-column prop="date" label="年销售额（万元）"> </el-table-column>
            <el-table-column prop="date" label="员工（人）"> </el-table-column>
            <el-table-column prop="date" label="窖池缸数量（条）"> </el-table-column>
            <el-table-column prop="date" label="储酒能力（吨）"> </el-table-column>
            <el-table-column prop="date" label="联系人"> </el-table-column>
            <el-table-column prop="date" label="联系电话"> </el-table-column>
            <el-table-column prop="date" label="企业电话"> </el-table-column>
          </el-table>
        </el-col>
      </el-tab-pane>
    </el-tabs>
  </el-col>
</template>

<script>
export default {
  name: 'companyRegister',
  data() {
    return {
      defulatParams: {
        companyName: "", // 公司名称
        groupId: "", // 组织代码
        province: "", // 省份
        contacts: "", // 联系人
      },
      searchParams: {
        ...this.defulatParams,
      },
      tableData: [{ date: 123 }], // 表格数据
    };
  },
  mounted() {
    this.queryTableData();
  },
  methods: {
    search() {
      // todo: 搜索方法
    },
    reset() {
      this.searchParams = {
        ...this.defulatParams
      };
      this.search();
    },
    queryTableData() {
      // todo：获取表格数据
    }
  },
};
</script>

<style lang="less" scoped>
.info-wrapper {
  font-family: Source Han Sans CN;
  font-weight: 400;
  height: 100%;

  .search-from {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #c2d9e6;
    padding-top: 20px;

    .search-col {
      display: flex;
    }

    .operation-area {
      margin-left: 20px;
      margin-bottom: 10px;
    }
  }

  .table-tabs {
    margin-top: 15px;
  }

  .operation-col {
    white-space: 5px;
  }
}

.save-btn {
  width: 80px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.add-bar {
  width: 300px;
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
